import { Card, Row ,Col, Table,Icon} from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import styles from "./Home.less";
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入折线图
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';
import { fakeTrendChartData } from "@/services/datastatistics";
// 引入提示框和标题组件
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 引入legend模块
require('echarts/lib/component/legend');
let myChart;
let myChartMan;
let pieChart;
import { TimelineChart } from '@/components/Charts';
import ProportionSales from './ProportionSales';
const pieColor = ['#2B47E6','#FF9640','#318C85','#14C6A1','#FF5C5D','#448ACA','#5360A7']

class ChatStat extends React.Component{
  constructor(props){
    super(props)
    this.state = {

    }
  }

  componentWillMount() {
    window.addEventListener('resize', function () {
      myChart?.resize();
      myChartMan?.resize();
      pieChart?.resize();
    });
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  sessionMain = (sessionStat) => {
    myChart = echarts.init(document.getElementById('sessionMain'));
    myChart.setOption({
      color: ['rgba(43, 71, 230,1)'],
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#ffffff',
        textStyle:{
          color:'#666666'
        },
        extraCssText:"box-shadow: 0px 3px 7px 0px rgba(6,0,1,0.16)"
      },
      legend: {
        data: ['会话数'],
        top: 'bottom',
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '30',
        top:'30',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: sessionStat.x,
          axisLine: {
            lineStyle: {
              color: '#eeeeee',
              width: 2,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(0, 0, 0, 0.65)',
            },
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          nameTextStyle: {
            color: '#eeeeee',
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: 'rgba(0, 0, 0, 0.65)',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#eeeeee',
              width: 0, //这里是为了突出显示加上的
            },
          },
        }
      ],
      series: [
        {
          name: '会话数',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 2,
            type:"solid"
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(43, 71, 230,1)'
              },
              {
                offset: 1,
                color: 'rgba(43, 71, 230, 0.1)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: sessionStat.y
        }
      ]
    })
  }

  transferMain = (transferObj) => {
    myChartMan = echarts.init(document.getElementById('transferMain'));
    myChartMan.setOption({
      color: ['rgba(20, 198, 161, 1)'],
      tooltip: {
        trigger: 'axis',
        backgroundColor:'#ffffff',
        textStyle:{
          color:'#666666'
        },
        formatter: `{b}<br /><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#14C6A1;margin-right:10px;"></span>{a}：{c}%`,
        extraCssText:"box-shadow: 0px 3px 7px 0px rgba(6,0,1,0.16)"
      },
      legend: {
        data: ['转人工率'],
        top: 'bottom',
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '30',
        top:'30',
        containLabel: true,
        borderColor:'#ffffff'
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: transferObj.x,
          axisLine: {
            lineStyle: {
              color: '#eeeeee',
              width: 2,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(0, 0, 0, 0.65)',
            },
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          nameTextStyle: {
            color: '#9a9a9a',
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: 'rgba(0, 0, 0, 0.65)',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#eeeeee',
              width: 0, //这里是为了突出显示加上的
            },
          },
        }
      ],
      series: [
        {
          name: '转人工率',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 2,
            type:"solid"
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(20, 198, 161, 1)'
              },
              {
                offset: 1,
                color: 'rgba(20, 198, 161, 0.1)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: transferObj.y
        }
      ]
    })
  }

  pieMain = (data) => {
    console.log(data);
    pieChart = echarts.init(document.getElementById('pieMain'));
    pieChart.setOption({
      color:pieColor,
      tooltip: {
        trigger: 'item',
        backgroundColor: '#ffffff',
        textStyle:{
          color:'#666666'
        },
        extraCssText:"box-shadow: 0px 3px 7px 0px rgba(6,0,1,0.16)",
        formatter:(params,xis) => {
          console.log(params,xis);
          return `
          <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${params.color};margin-right:10px;"></span>
          ${params.name}：${params.value}<span style="margin-left:10px">${params.percent}%</span>`
        }
      },
      legend: {
        show:false
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
        }
      ],
      grid:[{
        left:'0'
      }]
    })
  }

  setRowBg = (record,index) => {
    return index % 2 == 0 ? 'rowBg' : ''
  }

  render(){
    const { loading,questionTypeList,hotList,qaTotal,total } = this.props;
    const columns = [
      {
        title: '知识点类型',
        dataIndex: 'type',
        key: 'type',
        width: '10%',
      },
      {
        title: '知识点',
        dataIndex: 'question',
        key: 'question',
        width: '25%',
        render:question => {
          return <span style={{color:"#2B47E6"}}>{question}</span>
        }
      },
      {
        title: '命中次数',
        dataIndex: 'num',
        key: 'num',
        width: '10%',
      },
      {
        title: '环比变化',
        dataIndex: 'ratio',
        key: 'ratio',
        width: '10%',
        render: records => {
          return <span>
            {records.ratio}%
            {
              records.signal === 'up' ?
                <Icon type="arrow-up" style={{ color: 'rgba(21, 207, 136, 1)',marginLeft:10 }} />
                :
                <Icon type="arrow-down" style={{ color: 'rgba(255, 92, 93, 1)',marginLeft:10 }} />
            }
          </span>
        }
      },
    ];
    return(
      <div style={{marginTop:20}}>
        <Row gutter={20}>
          <Col span={24}>
            <div className={styles.colBorder}>
              <div className={styles.lineTitle} style={{marginBottom:0}}><img src={staticPath+"/homeImg/more.png"} /><span>{formatMessage({ id: 'userChatStat.sessionStatistics' })}</span></div>
              <div className={styles.chatBox} style={{marginTop: '53px'}}>
                <div id="sessionMain" style={{height:300}}></div>
              </div>
            </div>
          </Col>
        </Row>
        <Row gutter={20} style={{marginTop:20}}>
          <Col span={24}>
            <div className={styles.colBorder}>
              <div className={styles.lineTitle}><img src={staticPath+"/homeImg/more.png"} /><span>{formatMessage({ id: 'userChatStat.questionDistribution' })}</span></div>
              <div className={styles.chatBox} style={{height:362,display:'flex',alignItems:'center',padding:'0 20px 0 0',justifyContent:'space-between'}}>
                <div id='pieMain' className={styles.pieMainC} style={{height:280,marginRight:10}}></div>
                <div>
                  <ul style={{padding:0}}>
                    {
                      questionTypeList.map((item,index) => {
                        return (
                          <li style={{lineHeight:'35px'}} key={index}>
                            <span className={styles.dot} style={{background:pieColor[index]}}></span>
                            <span style={{ display: 'inline-block', width: 100 }}>{item.name}</span>
                            <span style={{ display: 'inline-block', width: 40 }}>{item.value}</span>
                            <span style={{ display: 'inline-block', width: 50 }}>{qaTotal > 0 ? ((item.value / qaTotal) * 100).toFixed(2) : '0'}%</span>
                          </li>
                        )
                      })
                    }
                  </ul>
                </div>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}

export default ChatStat
